/**
 * Created by Administrator on 2017/4/24.
 */
function hasClass(elem, cls) {
    elem = elem || {};
    return new RegExp("\\b" + cls + "\\b").test(elem.className);
};
//添加样式
function addClass(elem, cls) {
    elem = elem || {};
    hasClass(elem, cls) || (elem.className += " " + cls);
    elem.className = elem.className.replace(/^\s|\s$/g, "").replace(/\s+/g, " ");
    return this;
};
//删除样式
function removeClass(elem, cls) {
    elem = elem || {};
    if (hasClass(elem, cls)) {
        elem.className = elem.className.replace(new RegExp("(\\s|^)" + cls + "(\\s|$)"), "");
    }
    return this;
};
var NoticeCenter = React.createClass({
    getDefaultProps:function(){
        return{
            data: {
                notices: [],
                notice_icon: false
            }
        }
    },
    getInitialState: function () {
        return {
            delIds: []
        }
    },
    selectAllHandler: function(v,e){
        var source = e.target || e.srcElement;
        var allIds = [];
        v.map(function(message,index){
            allIds.push(message.MessageId);
        });
        if(source.checked){
            for(var i = 0; i < this.refs['messageList'].getElementsByTagName('input').length; i++){
                this.refs['messageList'].getElementsByTagName('input')[i].checked = true;
            }
            this.state.delIds = allIds;
        }else{
            for(var i = 0; i < this.refs['messageList'].getElementsByTagName('input').length; i++){
                this.refs['messageList'].getElementsByTagName('input')[i].checked = false;
            }
            this.state.delIds = [];
        }
    },
    selectHandler: function(messId,e){
        var source = e.target || e.srcElement;
        var isAllSelect = true;
        if(source.checked){
            if(this.state.delIds.indexOf(messId)== -1){
                this.state.delIds.push(messId);
            }
        }else{
            if(this.state.delIds.indexOf(messId)!= -1){
                this.state.delIds.splice(this.state.delIds.indexOf(messId),1);
            }
        }
        for(var i = 0; i < this.refs['messageList'].getElementsByTagName('input').length; i++){
            if(this.refs['messageList'].getElementsByTagName('input')[i].checked == false){
                isAllSelect = false
            }
        }
        if(isAllSelect){
            this.refs['selectAll'].getElementsByTagName('input')[0].checked = true;
        }else{
            this.refs['selectAll'].getElementsByTagName('input')[0].checked = false;
        }
    },
    deleteHandler: function(){
        this.props.data.delAjax(this.state.delIds);
    },
    showOrHideHandler: function(isLooked,messageId,e){
        var source = e.target || e.srcElement;
        if(hasClass(source.parentNode.parentNode,"down")){
            removeClass(source.parentNode.parentNode,"down");
        }else{
            addClass(source.parentNode.parentNode,"down");
        }
        if(isLooked==0){
            this.props.data.readAjax(messageId);
        }
    },
    render:function(){
        var _this = this;
        var notices = _this.props.data.notices;
        var notice_icon = _this.props.data.notice_icon;
        return(
            <div>
                <div ref="selectAll">
                    {
                        notices.length > 0 ? (<div className="head">
                            <input type="checkbox" checked={false} onclick={_this.selectAllHandler.bind(_this,notices)}/> 全部
                            <a href="javascript:void(0);" className="fc-main" onclick={_this.deleteHandler.bind(_this)}>删除</a>
                        </div>):""
                    }
                </div>
                <div ref="messageList">
                    {
                        notices.length > 0 ? (notices.map(function(massage,index){
                            return (
                                <div className="list">
                                    <div className="t">
                                        <input value={massage.MessageId} type="checkbox" checked={false} onclick={_this.selectHandler.bind(_this,massage.MessageId)}/>
                                        {notice_icon?(massage.IsLooked == 0?(<i className="iconfont icon-meg2"></i>):(<i className="iconfont icon-meg2 unread unread"></i>)):""}{massage.Title}
                                        <span className="message-time">{massage.SendDate}</span>
                                        <a onclick={_this.showOrHideHandler.bind(_this,massage.IsLooked,massage.MessageId)} href="javascript:;" className="showhide bg-icon"></a>
                                    </div>
                                    <div className="content">{massage.Content}</div>
                                </div>
                            );
                        })):(<div className="nodata">
                            <i className="bg-4"></i>您暂时没有相关消息
                        </div>)
                    }
                </div>
            </div>
        )
    }
});
module.exports = NoticeCenter;